<template>
    <!-- 首页（已认证） -->
    <div class="gd-main" style="overflow-y:auto;">
        <el-row type="flex">
            <el-col :span="15">
                <!-- 公司信息 -->
                <div class="md-card1">
                    <div class="md-card1-txt">{{companyInfo.companyName}}<i>已认证</i></div>
                    <div class="md-card1-subTxt">{{companyInfo.organizationCode}}</div>
                </div>
                <!-- 工人合同统计 -->
                <div class="md-statics1">
                    <div class="md-statics1-des">工人合同</div>
                    <el-row type="flex" :gutter="20">
                        <el-col :span="8">
                            <div class="md-statics1-item">
                                <div>{{workerTotal.inProgress}}</div>
                                <div>进行中</div>
                            </div>
                        </el-col>
                        <el-col :span="8">
                            <div class="md-statics1-item" style="background-color:#ccffff;">
                                <div>{{workerTotal.waitingForMeSign}}</div>
                                <div>待我签订</div>
                            </div>
                        </el-col>
                        <el-col :span="8">
                            <div class="md-statics1-item" style="background-color:#ffcccc;">
                                <div>{{workerTotal.takeEffect}}</div>
                                <div>生效中</div>
                            </div>
                        </el-col>
                    </el-row>
                </div>
                <!-- 班组合同统计 -->
                <div class="md-statics1" style="margin-top:20px;">
                    <div class="md-statics1-des">班组合同</div>
                    <el-row type="flex" :gutter="20">
                        <el-col :span="8">
                            <div class="md-statics1-item">
                                <div>{{subContractorTotal.inProgress}}</div>
                                <div>进行中</div>
                            </div>
                        </el-col>
                        <el-col :span="8">
                            <div class="md-statics1-item" style="background-color:#ccffff;">
                                <div>{{subContractorTotal.waitingForMeSign}}</div>
                                <div>待我签订</div>
                            </div>
                        </el-col>
                        <el-col :span="8">
                            <div class="md-statics1-item" style="background-color:#ffcccc;">
                                <div>{{subContractorTotal.takeEffect}}</div>
                                <div>生效中</div>
                            </div>
                        </el-col>
                    </el-row>
                </div>
            </el-col>
            <el-col :span="9">
                <!-- 班组信息 -->
                <el-row type="flex" justify="space-between" align="middle">
                    <!--<el-col :span="8">
                        <div class="md-statics2">
                            <div class="md-statics2-des">签约班组</div>
                            <div class="md-statics2-item">56</div>
                        </div>
                    </el-col>-->
                    <!--<el-col :span="8">
                        <div class="md-statics2">
                            <div class="md-statics2-des">待审批班组</div>
                            <div class="md-statics2-item">56</div>
                        </div>
                    </el-col>-->
                    <el-col :span="12" :offset="6">
                        <router-link to="/teamAdmin" tag="div"><el-button class="btn-team" type="primary">管理班组</el-button></router-link>
                    </el-col>
                </el-row>
                <!-- 发起班组内保合同 -->
                <el-row>
                    <el-col :span="12" :offset="6">
                        <router-link to="/team/startContruct" tag="div"><el-button class="btn-startContract" icon="el-icon-plus">发起班组内包合同</el-button></router-link>        
                    </el-col>
                </el-row>
                
            </el-col>
        </el-row>
    </div>
</template>

<script>
    import { mapGetters } from 'vuex';
    // 首页项目数据源 [ 工人合同和班组合同统计信息 ]
    import { queryIndexDataSourceTotal } from '@/request/aggregate';
    import { queryCompanyInfo } from '@/request/company';


    export default {
        name: 'Dashboard',
        computed: {
            ...mapGetters(['userId', 'currId', 'roleId'])
        },
        data() {
            return {
                companyName:'',
                companyInfo:{
                    companyName:'',
                    organizationCode:''
                },
                // 工人合同统计
                workerTotal: {
                    inProgress: 0,
                    takeEffect: 0,
                    waitingForMeSign: 0
                },
                // 班组合同统计
                subContractorTotal: {
                    inProgress: 0,
                    takeEffect: 0,
                    waitingForMeSign: 0
                }
            }
        },
        methods: {
            init() {
                let queryObj = {
                    userId:this.userId,
                    roleId:this.roleId,
                    currId:this.currId
                };
                
                queryIndexDataSourceTotal(queryObj).then(res => {
                    console.log('首页项目数据源 [ 工人合同和班组合同统计信息 ]', res);
                    if(res.code == '0') {
                        this.workerTotal = res.data.workerTotal
                        this.subContractorTotal = res.data.subContractorTotal
                    }
                });
            },
            //查询企业信息
            queryCompanyInfo(){
                let queryObj = {
                    userId:this.userId,
                    roleId:this.roleId,
                    currId:this.currId
                };
                
                return queryCompanyInfo(queryObj).then(res => {
                    this.companyInfo = res.data;
                });
            }
        },
        created() {
            //查询统计数据
            this.init();
            //查询公司信息
            this.queryCompanyInfo();
        }
    }
</script>

<style>
.btn-team{
    width:100%;
    font-size:16px;
}
.btn-startContract{
    width:100%;
    height:80px;
    font-size:16px;
    margin-top:20px;
}   
</style>